<template>
  <div>
    <h3 class="text-lg text-center bg-gray-100 py-2">wiki导航</h3>

    <el-breadcrumb
      class="mt-2 flex items-center"
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-home text-lg"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>分站点</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 class="mt-2 text-left pl-6 bg-gray-100 py-2">站点信息</h3>
    <section class="p-6 flex">
      <el-image
        class="w-24 h-24 rounded-md"
        :src="require('@/assets/images/avatar.jpg')"
      ></el-image>
      <div class="ml-6">
        <h3 class="text-lg font-semibold tracking-10">泰拉酒馆</h3>
        <ul class="mt-2 text-gray-500 text-sm leading-6">
          <li>现有27046位关注者，1,235,次编辑，6,505篇文章和2张图片</li>
          <li>站点分类：游戏</li>
          <li>创建时间：2022-11-11</li>
          <li>最近更新：2022-11-11</li>
        </ul>
        <ul class="mt-4 flex space-x-6">
          <li v-for="img in 3" :key="img">
            <el-image
              class="w-16 h-16"
              :src="require('@/assets/images/avatar.jpg')"
            ></el-image>
            <div class="text-center text-gray-600 w-16 line-clamp-1">aaa</div>
          </li>
        </ul>
      </div>
    </section>

    <h3 class="mt-2 text-left pl-6 bg-gray-100 py-2">站点简介</h3>
    <section class="p-6 leading-6 text-gray-600">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero ipsum
        itaque quaerat deserunt inventore cumque nobis ullam magnam aut cum
        veritatis totam labore harum minus, quidem vitae quos accusantium
        eveniet.
      </p>
      <p class="mt-4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore aut
        velit expedita, quisquam eum exercitationem id ex, unde accusantium et
        nemo sapiente. Neque, cumque maxime voluptatem odit in voluptatum qui.
      </p>
      <p class="mt-4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
        quae pariatur alias similique reprehenderit explicabo non velit ab
        labore ut enim, veniam error sunt fugiat eveniet aperiam fuga esse quia?
      </p>
    </section>

    <section class="border-t pt-12 grid grid-cols-2 gap-6">
      <div>
        <el-input v-model="input" class="w-64" placeholder="请输入"></el-input>
        <el-button class="bg-blue ml-2" type="primary">搜索</el-button>
      </div>
      <div class="">
        <div class="flex justify-between items-center px-4 bg-gray-100 py-2">
          <h4 class="">最近更新</h4>
          <nuxt-link class="text-sm" to="/sites-more"> 更多 </nuxt-link>
        </div>
        <ul class="pl-4 text-sm leading-7 pt-3">
          <li v-for="item in 5" :key="item">
            11-11 14:00 xxx 创建了 xx xx xxxxxx
          </li>
        </ul>
      </div>
    </section>

    <section class="mt-6 grid grid-cols-2 gap-6">
      <div class="">
        <h4 class="px-4 bg-gray-100 py-2">分类1</h4>
        <ul class="px-4 mt-4 grid grid-cols-2 gap-4">
          <li>分类1-1</li>
          <li>分类1-2</li>
          <li>分类1-3</li>
          <li>分类1-4</li>
          <li>分类1-5</li>
          <li>分类1-6</li>
          <li>分类1-7</li>
          <li>分类1-8</li>
        </ul>
      </div>
      <div class="">
        <h4 class="px-4 bg-gray-100 py-2">分类2</h4>
        <ul class="px-4 mt-4 grid grid-cols-2 gap-4">
          <li>分类1-1</li>
          <li>分类1-2</li>
          <li>分类1-3</li>
          <li>分类1-4</li>
          <li>分类1-5</li>
          <li>分类1-6</li>
          <li>分类1-7</li>
          <li>分类1-8</li>
        </ul>
      </div>

      <div class="">
        <h4 class="px-4 bg-gray-100 py-2">分类3</h4>
        <ul class="px-4 mt-4 grid grid-cols-2 gap-4">
          <li>分类1-1</li>
          <li>分类1-2</li>
          <li>分类1-3</li>
          <li>分类1-4</li>
          <li>分类1-5</li>
          <li>分类1-8</li>
        </ul>
      </div>
      <div class="">
        <h4 class="px-4 bg-gray-100 py-2">分类4</h4>
        <ul class="px-4 mt-4 grid grid-cols-2 gap-4">
          <li>分类1-1</li>
          <li>分类1-2</li>
          <li>分类1-3</li>
          <li>分类1-8</li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

<style>
</style>